<template>
  <common-dialog ref="dialog" :title="title" width="800px" :in-dialog="inDialog">
    <list ref="list" :show-checkbox="multiple">
      <template slot="column">
        <slot name="table" />
        <slot name="column" />
        <el-table-column label="操作" align="center" width="60" fixed="right" v-if="selectable && !multiple">
          <template slot-scope="{row}">
            <el-button @click="onSelected(row)" type="text" :disabled="selectLeaf && row.children != null">选择</el-button>
          </template>
        </el-table-column>
      </template>
    </list>
    <template slot="footer">
      <slot name="footer">
        <el-button type="primary" @click="selectMultiple" v-if="selectable && multiple">选择</el-button>
      </slot>
    </template>
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import list from "./list";

export default {
  components: { commonDialog, list },
  props: {
    title: {
      type: String,
      default: "菜单列表"
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    multiple:{
      type:Boolean,
      default:false
    },
    selectable:{
      type:Boolean,
      default:false
    },
    selectLeaf: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async showData(params) {
      await this.$refs.dialog.show();
      await this.$refs.list.getData(params);
    },
    onSelected(row){
      this.$refs.dialog.close();
      this.$emit("selected",row);
    }
  }
};
</script>